<template>
  <div>
    <el-main>
      <h3>创建联系人信息</h3>
      <div class="context">
        <span>联系人基本信息</span>
      </div>
      <el-divider />
      <!-- =============== -->
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        require-asterisk-position="right"
      >
        <el-form-item label="机构名称" :rules="{ required: true }">
          <el-input
            class="input"
            v-model="formInline.user"
            placeholder="请输入'山东工业职业学院图书馆'或'闽南理工学院图书馆两种效果'"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit"
            >查询</el-button
          > </el-form-item
        ><br />
        <el-form-item label=" 姓名" :rules="{ required: true }">
          <el-input v-model="formInline.user" />
        </el-form-item>
        <br />
        <div class="mb-2 flex items-center text-sm">
          性别：
          <el-radio-group v-model="radio1" class="ml-4">
            <el-radio label="1" size="large">男</el-radio>
            <el-radio label="2" size="large">女</el-radio>
          </el-radio-group>
        </div>
        <br />
        <el-form-item label=" 职务" :rules="{ required: true }">
          <el-input v-model="formInline.user" />
        </el-form-item>
        <br />
        <el-form-item label=" 手机" :rules="{ required: true }">
          <el-input v-model="formInline.user" />
        </el-form-item>
        <br />
        <el-form-item label=" 电话" :rules="{ required: true }">
          <el-input v-model="formInline.user" />
        </el-form-item>
        <br />
        <el-form-item label=" 传真" :rules="{ required: true }">
          <el-input v-model="formInline.user" />
        </el-form-item>
        <br />
        <el-form-item label=" 邮箱" :rules="{ required: true }">
          <el-input v-model="formInline.user" />
        </el-form-item>
        <br />
        <el-form-item label=" QQ" :rules="{ required: true }">
          <el-input v-model="formInline.user" />
        </el-form-item>
        <br />
        <el-form-item label=" 微信" :rules="{ required: true }">
          <el-input v-model="formInline.user" />
        </el-form-item>
        <br />
        <el-form-item label=" 地址" class="input">
          <el-input v-model="formInline.user" />
        </el-form-item>
        <br />
        <el-form-item label="重要等级">
          <el-select v-model="formInline.user" placeholder="陕西省">
            <el-option label="全部" value="shanghai" />
            <el-option label="编号" value="beijing" />
          </el-select>
        </el-form-item>
        <br />
        <el-form-item label="跟进状态">
          <el-select v-model="formInline.region" placeholder="陕西省">
            <el-option label="全部" value="shanghai" />
            <el-option label="编号" value="beijing" />
          </el-select>
        </el-form-item>
        <br />
        <el-form-item label=" 经办人" :rules="{ required: true }">
          <el-input v-model="formInline.user" /> </el-form-item
        >负责人
        <br />
        <div class="mb-2 flex items-center text-sm">
          是否认可：
          <el-radio-group v-model="radio1" class="ml-4">
            <el-radio label="1" size="large">是</el-radio>
            <el-radio label="2" size="large">否</el-radio>
          </el-radio-group>
        </div>
        <br />
        <el-form-item label="认可理由" class="input1">
          <el-input v-model="formInline.desc" type="textarea" class="remasks" />
        </el-form-item>
        <br />
        <el-form-item label=" 信息来源" class="input">
          <el-input v-model="formInline.user" />
        </el-form-item>
        <br />
        <el-form-item label="备注信息" class="input1">
          <el-input v-model="formInline.desc" type="textarea" class="remasks" />
        </el-form-item>

        <div class="CancalPostion">
          <el-form-item>
            <el-button type="primary">确认编辑</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </div>
      </el-form>
      <!-- ===================== -->
    </el-main>
  </div>
</template>

<script setup>
import { reactive } from "vue";
const formInline = reactive({
  user: "",
  desc: "",
});
import { ref } from "vue";

const radio1 = ref("1");
const radio2 = ref("1");
const onSubmit = () => {
  console.log("submit!");
};
</script>
<style lang='scss' scoped>
h3 {
  padding: 0;
  text-align: center;
}
.context {
  display: flex;
  justify-content: space-between;
}
.input {
  width: 500px;
}
.CancalPostion {
  margin-left: 400px;
}
.input1 {
  width: 700px;
}
</style>